<template>
  <el-dialog
    title="采集人脸信息"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    width="960px"
    :before-close="dialogClose"
    id="achieveDialog"
    :modal-append-to-body="false"
    :append-to-body="true"
  >
    <div>
      <div align="center" class="faceDiv faceDivSty">
        <div id="webcam" class="faceDivBox"></div>
        <div @click="flashChange()" class="hideBox">
          <div id="facembChange">{{ facembChange }}</div>
        </div>
        <div id="flashStatue" v-if="isDownFlash">
          <a href="http://www.adobe.com/go/getflashplayer">
            <img
              src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
              alt="Get Adobe Flash Player"
            />
          </a>
        </div>
        <div id="hint_info" class="showInfo">{{ hintInfo }}</div>
        <div>
          <img
            id="emp_faceImgId1"
            :src="item"
            width="100px"
            height="100"
            class="img-rounded"
            style="border: 1px solid burlywood"
            v-for="(item, i) in srcArr"
            :key="i"
          />
        </div>
        <div class="collectButBox">
          <el-button
            id="cj_play"
            type="button"
            class="collectBut"
            @click="take_snapshot"
            :disabled="isDis"
            >{{ goCollect }}</el-button
          >
        </div>
      </div>
      <div align="center" class="faceDiv faceImg">
        <div class="faceImgBox">
          <img
            class="imgP img-thumbnail"
            id="emp_faceImgId"
            :src="bigImage ? bigImage : defaultImg"
          />
        </div>
        <!-- 进度条 -->
        <div style="height: 25px; padding-top: 10px" v-if="isShowProgress">
          <el-progress
            :text-inside="true"
            :stroke-width="28"
            :percentage="percentage"
            :status="status"
          ></el-progress>
        </div>
        <div id="showInfo2" class="showInfo2">{{ showInfo }}</div>
        <div id="empface_draw"></div>
      </div>
      <div id="canvas_div" style="display: none">
        <canvas id="canvas_c"></canvas>
      </div>
      <div id="flashDiv" class="flashDiv" v-if="isFlashDiv"></div>
    </div>
    <div style="clear: both"></div>
    <div class="collectTip">
      &nbsp;&nbsp;采集说明：<br />(1.)确保拍摄时头部居中，面部清晰；
      &nbsp;&nbsp;(2.)请脱帽、不要戴眼镜，并露出额头和耳朵；
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="dialogClose" class="cancel">关闭</el-button>
      <el-button
        type="primary"
        @click.native="saveCollect"
        class="save"
        :loading="canLogin"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'faceCollect',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //  bg: require('../../kits/face/jscam.swf'),
      facembChange: '遮罩',
      hintInfo: '初始化中......',
      isFlashDiv: false,
      canLogin: false,
      isDownFlash: false,
      srcArr: [
        require('../../../static/img/face/facedefault.png'),
        require('../../../static/img/face/facedefault.png'),
        require('../../../static/img/face/facedefault.png'),
      ],
      bigImage: '',
      defaultImg: require('../../../static/img/face/facedefault.png'),
      count: 0,
      trueCount: 0,
      flag: true,
      showInfo: '未采集成功',
      goCollect: '点击采集',
      isShowProgress: false,
      percentage: 0,
      status: 'exception',
      isDis: false,
      collectFile: [],
      timer: null,
      isShow: true,
    }
  },
  created() {
    this.showInfo = '未采集成功'
    this.goCollect = '点击采集'
    this.isShowProgress = false
    this.percentage = 0
    this.status = 'exception'
    this.isDis = false
    this.count = 0
    var that = this
    this.$nextTick(function () {
      Webcam.set({
        width: 320,
        height: 240,
        image_format: 'png',
        // jpeg_quality: 90,
      })
      Webcam.on('error', function (err) {
        if (err.message == 'Could not start video source') {
          that.isDis = true
          that.hintInfo = '未检测到摄像头,确认是否被占用...'
        } else {
          that.isDis = true
          that.hintInfo = '初始化未获取到摄像头'
        }
      })
      Webcam.attach('#webcam')
      this.hintInfo = '初始完成，保持头像居中，点击采集..'
    })
  },
  mounted() {
    // this.isIE()
    // this.$nextTick(function() {
    //       Webcam.set({
    //         width: 320,
    //         height: 240,
    //         image_format: 'png',
    //         // jpeg_quality: 90,
    //       });
    //       Webcam.attach('#webcam');
    //       this.hintInfo = "初始完成，保持头像居中，点击采集..";
    //   })
  },
  computed: {},
  methods: {
    dialogClose() {
      this.$emit('closeDialog')
      this.count = 40
      Webcam.reset()
    },
    flashChange() {
      this.isShow = !this.isShow
      if (!this.isShow) {
        this.facembChange = '隐藏'
        this.isFlashDiv = true
      } else {
        this.facembChange = '遮罩'
        this.isFlashDiv = false
      }
    },
    isIE() {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        if (!this.flashCheck()) {
          this.hintInfo = '未安装flash,或者flash被禁用'
          this.isDownFlash = true
        }
      }
    },
    //检测是否安装flash
    flashCheck() {
      var flag = false
      if (window.ActiveXObject) {
        try {
          var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
          if (swf) {
            flag = true
          }
        } catch (e) {}
      } else {
        try {
          var swf = navigator.plugins['Shockwave Flash']
          if (swf) {
            flag = true
          }
        } catch (e) {}
      }
      return flag
    },
    take_snapshot() {
      var that = this
      that.goCollect = '采集中...'
      that.isDis = true
      this.isShow = false
      this.facembChange = '隐藏'
      this.isFlashDiv = true
      Webcam.snap(function (data_uri) {
        that
          .axios({
            method: 'post',
            url: 'api-att/faceCheck/baiduFaceCheck',
            data: { h: 240, val: 'data', w: 320, image: data_uri },
          })
          .then((response) => {
            that.isShowProgress = true
            var faceInfo
            var checkInfo_text
            var data = response.data
            if (data instanceof Object) {
              faceInfo = data.checkInfo
              checkInfo_text = data.checkInfo_text
            } else {
              // var vv = JSON.stringify(data);//json--String
              faceInfo = JSON.parse(data).checkInfo //string--json
              checkInfo_text = JSON.parse(data).checkInfo_text
            }
            that.srcArr[that.trueCount] = data_uri
            that.trueCount++
            if (that.trueCount > 2) {
              that.trueCount = 0
            }
            that.percentage = 0
            that.percentage += 10
            if ('yes' == faceInfo) {
              //图片进行显示
              that.bigImage = data_uri
              setTimeout(function () {
                that.percentage = 100
                that.status = 'success'
              }, 500)
              that.showInfo = '采集成功'
              that.isDis = false
              that.goCollect = '重新采集'
              that.hintInfo = '人脸校验成功,请进行保存..'
            } else {
              that.hintInfo = checkInfo_text + '，重新采集中...'
              //开启定时器重新采集
              if (that.count > 35) {
                that.hintInfo = '采集次数过多未成功，点击开始继续进行采集...'
                that.goCollect = '开始采集'
                that.isDis = false
                return
              } else {
                setTimeout(function () {
                  that.percentage = 80
                  that.status = 'warning'
                }, 500)
                setTimeout(function () {
                  that.take_snapshot()
                  that.isShowProgress = false
                }, 2000)
              }
            }
            that.count++
          })
          .catch((error) => {
            // alert(123)
            //   that.count++
            //   that.take_snapshot()
            this.$message({
              message: '采集人数失败！',
              type: 'warning',
            })
          })
      })
    },
    saveCollect() {
      this.collectFile = []
      if (this.bigImage == '') {
        this.$message({
          message: '未获取到采集的的头像！',
          type: 'warning',
        })
        return
      }
      //保存并继续添加需要先清空身份证数组
      this.axios({
        method: 'post',
        url: 'api-f/files/upload/base64',
        data: {
          image64: this.bigImage,
        },
      })
        .then((response) => {
          var data = response.data
          var collectUrl = data.url
          this.collectFile.push(response.data)
          this.$emit('collectUrlFunc', collectUrl, this.collectFile)
          this.$emit('closeDialog')
          Webcam.reset()
        })
        .catch((error) => {})
    },
  },
}
</script>
<style scoped lang="less">
.faceDiv {
  width: 420px;
  height: 490px;
  float: left;
  border: 1px dashed #4d4d4d;
}
.faceDivSty {
  margin: 0px 20px 0px 20px;
  padding: 20px 0px 10px 0px;
  .hideBox {
    padding-left: 285px;
    // margin-top: -45px;
    z-index: 10;
    position: relative;
    top: -20px;
    div {
      border: 1px dashed #b2dba1;
      font-size: 12px;
      color: #b2dba1;
      width: 40px;
      height: 20px;
      font-family: '黑体';
    }
  }
  .collectButBox {
    margin-top: 10px;
    .collectBut {
      width: 300px;
      height: 40px;
      background: #009588;
      color: #fff;
      border: 0;
      border-radius: 5px;
    }
  }
}
.faceImg {
  padding: 20px 0px 10px 0px;
  .faceImgBox {
    width: 400px;
    height: 320px;
    align-content: center;
    .imgP {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
  /deep/.el-progress-bar {
    width: 70% !important;
  }
}
.faceDivBox {
  width: 420px;
  height: 260px;
  align-content: center;
}
.flashDiv {
  background: url('../../../static/img/face/facemb.png') no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
  position: relative;
  left: 70px;
  top: 20px;
  z-index: 1;
  border: 0px solid lawngreen;
  width: 320px;
  height: 240px;
}
.collectTip {
  font-size: 12px;
  margin: 10px 0px 0px 20px;
  line-height: 20px;
  color: brown;
  text-align: center;
}

.showInfo {
  display: block;
  font-size: 16px;
  color: red;
  // margin:25px 0px 5px 10px;
  height: 30px;
  /*width: 300px;*/
  /*background-color: #c7ddef;*/
  align-content: center;
  // margin-top:35px;
  margin-top: -10px;
}
.showInfo2 {
  height: 60px;
  width: 300px;
  align-content: center;
  font-size: 25px;
  margin: 20px 0px 0px 0px;
  background: rgb(255, 241, 168);
  line-height: 60px;
  border-radius: 5px;
}
#achieveDialog/deep/.el-dialog__body {
  max-height: 600px !important;
  overflow-y: auto;
}
@media screen and (max-height: 768px) {
  #achieveDialog/deep/.el-dialog__body {
    max-height: 475px !important;
  }
}
</style>
